<template>
	<view class="letter">
		<view class="test_list" v-for="(item,index) in messages" :key="index">
			<image class="pic" mode="aspectFit" :src="pic" :data-imgurl="pic"
			@tap="previewImage">
			</image>
			<view class="pic_text">
				<text>负责人：{{item}}</text>
				<text>职责：油烟噪音</text>
				<text>信访日期：5月17日 办理期限：4天</text>
				<view class="button_group">
					<button class="b_1" plain='true'>删除</button>
					<button class="b_2" >完成</button>
				</view>
			</view>
			<!-- {{item}} -->
		</view>
	</view>
</template>

<script>
	export default {
		name:"simple_message",
		//图片路径以后也会通过放在messages数组里的对象中来获取
		props: ['messages'],
		data() {
			return {
				pics: ["/static/pngs/8fdf90dde04e2beb661b65f31e59e1b.png"],
				pic: "/static/pngs/8fdf90dde04e2beb661b65f31e59e1b.png"
			};
		},
		methods: {
			doNothing() {
				
			},
			//预览轮播图
			previewImage(e){
				// var i = this.detailList[0].lunboImg; //获取当前页面的轮播图数据
				//实际情况路径应该通过获取组件的自定义属性方式来获取
				console.log("预览图片执行")
				let imgurl = e.currentTarget.dataset.imgurl
				let imgArr = []
				imgArr[0] = imgurl
				//uniapp预览轮播图
				console.log("图片地址" + imgurl)
				//预览图片API里的URLS不能使用相对路径方式即../这种方式
				uni.previewImage({
					current:0, //预览图片的下标
					urls: imgArr //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>

<style lang="scss">
.letter {
			width: 750rpx;
			// border-radius: 30px 30px 0 0;
			// height: 100%;
			// height: 1000rpx;
			background-color: #dfe6e9;
			text-align: center;
			color: #8a8a8a;
			padding: 10rpx;
			.test_list {
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				margin-top: 15rpx;
				width: 710rpx;
				height: 250rpx;
				background-color: #FFFFFF;
				padding: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
			}
		}
	.pic {
		width: 300rpx;
	}
	.pic_text {
		// width: 200rpx;
		// // height: 150rpx;
		width: 300rpx;
		display: flex;
		flex-direction: column;
		.button_group {
			display: flex;
			flex-direction: row;
			.b_1{
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 20rpx;
				color: #55aaff;
				// background-color: #FFFFFF;
				font-size: 22rpx;
				border: 1px solid #55aaff;
				// background-color: #55aaff;
				
			}
			.b_2{
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 22rpx;
				background-color: #55aaff;
				color: #FFFFFF;
			}
		}
	}
</style>
